{// layui的dtree组件用2.5.6版本，不要用2.5.7，2.5.7版本有bug，导致工具栏editTreeNode方法存在问题 }
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>文章分类</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/backend/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/backend/css/public.css" media="all">
    <link rel="stylesheet" href="/static/backend/js/layui-extends/dtree/dtree.css">
    <link rel="stylesheet" href="/static/backend/js/layui-extends/dtree/font/dtreefont.css">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <ul id="demoTree" class="dtree" data-id="0"></ul>
    </div>
</div>
<script src="/static/backend/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.config({
        base: '/static/backend/js/layui-extends/'
    }).extend({
        dtree: 'dtree/dtree'
    }).use(['dtree','layer','jquery'], function () {
        var dtree = layui.dtree,
            $ = layui.jquery,
            layer = layui.layer;

        // 初始化树
        var DemoTree = dtree.render({
            elem: "#demoTree",
            url: "/backend/article-category/category-list",
            dataStyle: "layuiStyle",
            response:{message:"msg",statusCode:0},
            toolbar:true,
            toolbarWay: "follow",
            toolbarBtn: [
                [],
                [{"label":"修改名称","name":"title","type":"text","defElem":"nowChange",'verify':''},
                    {"label":"上级分类","name":"parent","type":"select","optionsData":function () {
                        var json = '';
                        $.ajax({
                            type: 'GET',
                            url: '/backend/article-category/get-category-list',
                            async: false,
                            dataType: 'json',
                            success: function (res) {
                                if (res.code == 0) {
                                    json = res.data;
                                } else if (res.code == 302) {
                                    location.href = '/backend/error/' + res.msg;
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }
                        });
                        return json;
                    }
                }]
            ],
            toolbarFun:{
                addTreeNode: function(treeNode, $div){
                    $.post('/backend/article-category/add-category', {title:treeNode.context, pid:treeNode.parentId},
                        function (res) {
                            if (res.code == 0) {
                                // 添加成功
                                DemoTree.changeTreeNodeAdd(treeNode.nodeId);
                            } else if (res.code == 302) {
                                location.href = '/backend/error/' + res.msg;
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                    }, 'json');
                },
                editTreeLoad: function(treeNode){
                    // 这里可以发送ajax请求，来获取参数值，最后将参数值以form能识别的键值对json的形式返回
                    $.post('/backend/article-category/backfill-category', {id:treeNode.nodeId}, function (res) {
                        if (res.code == 0) {
                            // 添加成功
                            var param = res.data;
                            DemoTree.changeTreeNodeDone(param);
                        } else if (res.code == 302) {
                            location.href = '/backend/error/' + res.msg;
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }, 'json');
                },
                editTreeNode: function(treeNode, $div){
                    $.post('/backend/article-category/edit-category',
                        {id:treeNode.nodeId, title:treeNode.title, parent:treeNode.parent},
                        function (res) {
                            if (res.code == 0) {
                                // 修改成功
                                // 重新加载分类树
                                dtree.reload("demoTree", {
                                    url: '/backend/article-category/category-list'
                                });
                            } else if (res.code == 302) {
                                location.href = '/backend/error/' + res.msg;
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                },
                delTreeNode: function(treeNode, $div){
                    $.post('/backend/article-category/delete-category', {id:treeNode.nodeId}, function (res) {
                        if (res.code == 0) {
                            // 删除成功
                            DemoTree.changeTreeNodeDel(true);
                        } else if (res.code == 302) {
                            location.href = '/backend/error/' + res.msg;
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }, 'json');
                }
            },
            menubar:true,
            menubarTips: {
                group: ["moveDown", "moveUp", "refresh", {
                    menubarId: "add",  // 按钮的唯一ID
                    icon: "dtree-icon-roundadd", // 从dtreefont库中选取
                    title: "添加顶级分类",  // 按钮的提示标题
                    handler: function (node, $div) {  //扩展按钮的回调函数
                        layer.prompt({title: '请输入分类名称', formType: 0}, function(title, index) {
                            layer.close(index);
                            $.post('/backend/article-category/add-category', {title:title, pid:0}, function (res) {
                                if (res.code == 0) {
                                    // 添加成功
                                    dtree.reload("demoTree", {
                                        url: '/backend/article-category/category-list'
                                    });
                                } else if (res.code == 302) {
                                    location.href = '/backend/error/' + res.msg;
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }, 'json');
                        });
                    }
                }]
            },
        });
    });
</script>
</body>
</html>